<template>
  <page-frame>
    <div class="package-change-02">
      <div class="toptitle">
        <div class="left">套餐变更 - 变更确认</div>
        <div class="right">
          <div class="btns">
            <el-button @click="confirmBack">确&nbsp认</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="bedChangeApproval">
        <div class="step-show" @click="showStep">
          <img src="../../img/show.png" class="step-show-img" v-show="isShowStep">
          <img src="../../img/hidden.png" class="step-show-img" v-show="!isShowStep">
          {{show}}
        </div>
        <div class="stepbar" v-show="isShowStep">
          <stepModify :stepData="stepData"></stepModify>
        </div>
        <div class="check-confirm-main">
          <div class="title">
            套餐变更流程办理成功!</div>
          <div class="content">
            <div class="left"><img src="../../img/placeholder.png" alt=""></div>
            <div class="right">
              <table cellpadding="0" cellspacing="0">
                <tr>
                  <th>
                    请确认您的套餐变更信息</th>
                </tr>
                <tr>
                  <td>
                    会员姓名: <span>{{informationConfirm.memberName}}</span></td>
                </tr>
                <tr>
                  <td>
                    会员编号: <span>{{informationConfirm.memberNo}}</span></td>
                </tr>
                <tr>
                  <td>
                    原套餐: <span>{{informationConfirm.oldComboName}}</span></td>
                </tr>
                <tr>
                  <td>
                    新套餐: <span>{{informationConfirm.newComboName}}</span></td>
                </tr>
                <tr>
                  <td>
                    变更原因: <span>{{informationConfirm.changeComboReason}}</span></td>
                </tr>
                <tr>
                  <td>
                    变更费用: <span>{{informationConfirm.changeComboCost}}</span></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  import stepModify from '../../components/stepbar/modify.vue';
  import commonApi from '../../service/member/commonApi';
  import packageChangeApi from '../../service/member/packageChangesApi';
  export default {
    methods: {
      init(){
        this.currentMemberObj = this.$route.params.memberObj;
        this.infoConfirm();
      },
      /**
       * 获取套餐变更确认详情
       */
      infoConfirm(){
        packageChangeApi.confirmPackage(this.currentMemberObj.actId).then(res =>{
          this.informationConfirm = res.body.data;
          /*this.informationConfirm.oldComboName = "";
          this.informationConfirm.newComboName = "";
          var arrName = [];
          for(var infor of this.informationConfirm.oldCombo){
            arrName.push(infor.itemName);
          };
          this.informationConfirm.oldComboName = arrName.join(",");
          var arrName2 = [];
          for(var infor of this.informationConfirm.newCombo){
            arrName2.push(infor.itemName);
          };
          this.informationConfirm.oldComboName = arrName2.join(",");*/
        },res =>{});
      },
      /**
       * 流程确认
       */
      confirmBack(){
        commonApi.confirmCompleteProcess(this.currentMemberObj.actId).then(res => {
          this.$router.push({name: 'packageChanges'});
        },res =>{
          this.$message({
            type: 'error',
            message: '确认失败!'
          });
        });
      },
      //显示或者隐藏流程图
      showStep(){
        this.isShowStep =  !this.isShowStep;
        (this.isShowStep == false) ? (this.show = "显示流程图"):(this.show = "隐藏流程图");
      },
    },
    mounted: function () {
      this.init();
    },
    data() {
      return {
        currentMemberObj:{},
        stepData:3,
        activeNo:2,
        informationExpenseItem:[],
        informationBill:{},
        memberDTO:{},
        accountDTO:{},
        queryData:{
          "actId": 2,
          "memberId":1,
          "taskId": ""
        },
        informationConfirm:{
          "memberId": "",
          "memberNo": "",
          "memberName": "",
          "oldCombo": [],
          "newCombo": [
            {
              "itemName": "",
              "price": ""
            }
          ],
          "changeComboReason": "",
          "changeComboCost": ""
        },
        isShowStep:false,
        show:"显示流程图",
      }
    },
    components: {
      stepModify
    },
  }
</script>
<style>
  .package-change-02 .memberInfo{
    font-size:13px;
    margin-bottom: 10px;
  }
  .bedChangeApproval .bedChangeApprovalContent{
    width: 80%;
    margin: 0 auto;
    padding-left: 30px;
  }
  .bedChangeApproval .bedChangeApprovalContent .bar{
    margin-bottom:18px;
    margin-top: 50px;
  }
  .bedChangeApproval .bedChangeApprovalContent .review .reviewItem{
    height:36px;
    line-height:36px;
    width:100%;
    background-color:#eef1f6;
    margin-bottom:5px;
  }
  .bedChangeApproval .el-form-item__label{
    width: 70px!important;
  }
  .bedChangeApproval .el-form-item__content{
    margin-left: 0px!important;
  }
  .bedChangeApproval .el-form-item{
    margin-right: 30px;
  }
  .bedChangeApproval .el-card__header{
    padding: 3px 20px;
  }
  .bedChangeApproval .text {
    font-size: 14px;
    background-color: #F5FBFF;
    border-bottom: 1px solid #ffffff;
    position: relative;
  }
  .bedChangeApproval .item {
    padding: 15px 20px;
  }
  .check-confirm .stepbar{
    margin-top: 66px;
  }
  .check-confirm-main{
    width: 800px;
    margin: 0 auto;
    overflow: hidden;
  }
  .check-confirm-main .title{
    color:#3fc6d2;
    font-size: 22px;
    width: 190px;
    margin: 50px auto;
  }

  .check-confirm-main .left{
    float: left;
  }
  .check-confirm-main .right{
    float: right;
    margin-top: 20px;
  }
  .check-confirm-main .right table{
    width: 300px;
    border: 1px solid #dfe6ec;
    border-radius: 6px;
  }
  .check-confirm-main .right tr th {
    background-color:#dfe6ec;
    padding: 10px 10px;
  }
  .check-confirm-main .right tr td {
    border-width: 1px;
    border-style: solid;
    border-color: #dfe6ec;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 10px;
  }
  .check-confirm .stepbar{
    margin-top: 66px;
  }
  .check-confirm-main{
    width: 800px;
    margin: 0 auto;
    overflow: hidden;
  }
  .check-confirm-main .title{
    color:#3fc6d2;
    font-size: 22px;
    width: 230px;
    margin: 50px auto;
  }

  .check-confirm-main .left{
    float: left;
  }
  .check-confirm-main .right{
    float: right;
    margin-top: 20px;
  }
  .check-confirm-main .right table{
    width: 300px;
    border: 1px solid #dfe6ec;
    border-radius: 6px;
  }
  .check-confirm-main .right tr th {
    background-color:#dfe6ec;
    padding: 10px 10px;
  }
  .check-confirm-main .right tr td {
    border-width: 1px;
    border-style: solid;
    border-color: #dfe6ec;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 10px;
  }
</style>


